import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Dimensions,
    TouchableOpacity,
    Image,
    ScrollView,
    TextInput
} from 'react-native';
import AndroidModule from '../../utils/AndroidConnent'
import { ToastToUser } from '../../utils/CustomToast';


let vcodeLength = 17
const isIos = Platform.OS == 'ios';

export default class FoursAlertTexttFieldPop extends Component {

    constructor(props) {
        super(props);
        this.state = {
            vcode: '',
        }
    };

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.alertContainer}>
                    <View style={styles.textInputBox}>
                        <TextInput
                            keyboardType={isIos ? 'ascii-capable' : 'default'}
                            autoCorrect={false}
                            editable={true}
                            returnKeyType='done'
                            autoCapitalize='characters'
                            style={styles.textInput}
                            placeholder={'输入17位VIN码'}
                            placeholderTextColor="#999999"
                            value={this.state.vcode}
                            maxLength={vcodeLength}
                            onChangeText={this.changeText.bind(this, 'vcode')}
                        />
                        <Text style={styles.lengthText}>{this.state.vcode.length + '/17'}</Text>
                        <TouchableOpacity
                            activeOpacity={0.8}
                            onPress={() => {
                                let params = {}
                                AndroidModule.selectCarVin(params, (error, result) => {
                                    this.setState({
                                        vcode: result
                                    }, function () {

                                    })
                                })
                            }}
                        >
                            <Image style={styles.scanImg} source={require('source/image/weibao/vin_scan.png')} />
                        </TouchableOpacity>
                    </View>

                    <Text style={styles.desText}>{'车辆暂未添加车架号，请先在上方框内填写完整的VIN码'}</Text>

                    <TouchableOpacity
                        style={styles.sureBtn}
                        activeOpacity={0.8}
                        onPress={()=>{
                            if (this.state.vcode.length < 17) {
                                ToastToUser('请填写17位VIN码')
                                return
                            }
                            if (this.props.onSelected) {
                                this.props.onSelected(this.state.vcode)
                            }
                        }}
                    >
                        <Text style={styles.sureText}>确认</Text>
                    </TouchableOpacity>

                    <TouchableOpacity
                        style={styles.cancelBtn}
                        activeOpacity={0.8}
                        onPress={()=>{
                            if (this.props.onClose) {
                                this.props.onClose()
                            }
                        }}
                    >
                        <Text style={styles.cancelText}>取消</Text>
                    </TouchableOpacity>

                </View>
            </View>
        )
    }

    //输入框内容输入
    changeText(type, val) {
        this.setState({
            [type]: val
        }, function () {

        })
    }



}

const styles = StyleSheet.create({
    container: {
        position: 'absolute',
        zIndex: 1001,
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        backgroundColor: 'rgba(0,0,0,0.5)',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center'
    },
    alertContainer: {
        paddingTop: 21,
        paddingBottom: 15,
        paddingHorizontal: 16,
        width: 280,
        backgroundColor: '#fff',
        borderRadius: 8,
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'flex-start'
    },
    textInputBox: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingHorizontal: 8,
        width: '100%',
        height: 40,
        borderWidth: 0.5,
        borderColor: '#e4e4e4',
        borderRadius: 4,
    },
    textInput: {
        flex: 1,
        height: '100%',
        color: '#333333',
        fontSize: 14,
        flex: 1,
        height: '100%',
    },
    lengthText: {
        fontSize: 14,
        color: '#999'
    },
    scanImg: {
        marginLeft: 10,
        width: 18,
        height: 18,
    },
    desText: {
        textAlign: 'center',
        marginTop: 20,
        fontSize: 14,
        color: '#666',
        lineHeight: 20
    },
    sureBtn: {
        marginTop: 20,
        width: '100%',
        height: 40,
        borderRadius: 4,
        backgroundColor: '#ffde00',
        justifyContent: 'center',
        alignItems: 'center'
    },
    cancelBtn: {
        marginTop: 15,
        width: '100%',
        height: 40,
        justifyContent: 'center',
        alignItems: 'center'
    },
    sureText: {
        fontSize: 15,
        color: '#333',
    },
    cancelText: {
        fontSize: 15,
        color: '#999',
    }

})